<template>
    <div class="report">
        <x-header v-show="!isWeChar">
            <div slot="default" class="common__header--title">报表统计</div>
            <div @click="goBack" slot="overwrite-left" class="common__header--img"><img slot="icon" src="~assets/x3/ico/goback1.png" class="go-back"></div>
        </x-header>

        <group>
            <cell :border-intent="false" :arrow-direction="isShowPersonal ? 'up' : 'down'" @click.native="isShowPersonal = !isShowPersonal">
                <div class="report__cell--title" slot="after-title">个人业绩预览</div>
                <img slot="icon" width="20" style="display:block;margin-right:5px;" src="~assets/x3/ico/shop-header.png">
                <img slot="child" width="20" src="~assets/x3/ico/shop-header.png">
                <div class="report__cell--rightfont" slot="default">收起</div>
            </cell>
            <p class="slide" :class="isShowPersonal?'animate':''">
                <x-table :cell-bordered="false" style="background-color:#fff;">
                    <thead class="report__table--thead">
                        <tr>
                            <th>险种</th>
                            <th>昨日签单</th>
                            <th>月度签单</th>
                        </tr>
                    </thead>
                    <tbody class="report__table--tbody">
                        <tr>
                            <td class="report__table--titletd">车险</td>
                            <td>$1.25</td>
                            <td> x 1</td>
                        </tr>
                        <tr>
                            <td class="report__table--titletd">非车险</td>
                            <td>$1.20</td>
                            <td> x 2</td>
                        </tr>
                    </tbody>
                </x-table>
            </p>
        </group>

        <group>
            <cell :border-intent="false" :arrow-direction="isShowFriends ? 'up' : 'down'" @click.native="isShowFriends = !isShowFriends">
                <div class="report__cell--title" slot="after-title">好友业绩预览</div>
                <img slot="icon" width="20" style="display:block;margin-right:5px;" src="~assets/x3/ico/shop-header.png">
                <img slot="child" width="20" src="~assets/x3/ico/shop-header.png">
                <div class="report__cell--rightfont" slot="default">收起</div>
            </cell>
            <p class="slide" :class="isShowFriends?'animate':''">
                <x-table :cell-bordered="false" style="background-color:#fff;">
                    <thead class="report__table--thead">
                        <tr>
                            <th>好友分组</th>
                            <th>昨日签单</th>
                            <th>月度签单</th>
                        </tr>
                    </thead>
                    <tbody class="report__table--tbody">
                        <tr>
                            <td class="report__table--titletd">车险</td>
                            <td>$1.25</td>
                            <td> x 1</td>
                        </tr>
                        <tr>
                            <td class="report__table--titletd">非车险</td>
                            <td>$1.20</td>
                            <td> x 2</td>
                        </tr>
                    </tbody>
                </x-table>
            </p>
        </group>

        </x-table>
    </div>
</template>

<script>
import { XHeader, Cell, CellBox, CellFormPreview, Group, XTable, LoadMore, Badge } from 'vux';
import { mapState, mapActions } from "vuex";
export default {
    components: { Badge, Group, Cell, CellFormPreview, CellBox, XTable, LoadMore, XHeader },
    computed: mapState({
        isWeChar: "isWeChar"
    }),
    data() {
        return {
            isShowPersonal: false,
            isShowFriends: false
        }
    },
    methods: {
        goBack() {
            this.$common.goBack(this);
        }
    },
    mounted() {
        document.title = "报表统计";
        let _this = this;
        this.$init.subPageInit(this);
    },
}
</script>


<style lang="scss">
.sub-item {
  color: #888;
}

.report__cell--title {
  font-size: 14px;
}

.report__cell--rightfont {
  font-size: 12px;
  color: #cbcbcb;
}

.slide {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.5s cubic-bezier(0, 1, 0, 1) -0.1s;
}

.animate {
  max-height: 9999px;
  transition-timing-function: cubic-bezier(0.5, 0, 1, 0);
  transition-delay: 0s;
}

.report__table--thead {
  background-color: #e5ebf2;
  th {
    font-size: 14px;
    color: #808080;
  }
}

.report__table--tbody {
  td {
    font-size: 14px;
    color: #C8161D;
  }
}

.report__table--titletd {
  font-size: 14px;
  color: #000000 !important;
}
</style>










